<template>
    <div>
        <el-dialog :visible.sync="cus_account1" title="客户详细信息" >
            <el-form :model="customer" :rules="rules" ref="customerForm" label-width="100px" style="width: 500px;"
                     size="small ">
                <el-form-item label="客户账号" prop="cusAccount">
                    <el-input v-model="customer.cusAccount" :disabled="true"/>
                </el-form-item>
                <el-form-item label="密  码" prop="cusPwd">
                    <el-input v-model="customer.cusPwd" :disabled="true"/>
                </el-form-item>
                <el-form-item label="姓  名" prop="cusName">
                    <el-input v-model="customer.cusName" :disabled="true"/>
                </el-form-item>
                <el-form-item label="身份证号" prop="cusId">
                    <el-input v-model="customer.cusId" :disabled="true"/>
                </el-form-item>
                <el-form-item label="电话号码" prop="cusTelNumber">
                    <el-input v-model="customer.cusTelNumber" :disabled="true"/>
                </el-form-item>

                <el-form-item label="年  龄" prop="age">
                    <el-input v-model="customer.age" :disabled="true"/>
                </el-form-item>

                <el-form-item label="性  别" prop="cusSex">
                    <el-input v-model="customer.cusSex" :disabled="true"/>
                </el-form-item>
                <el-form-item label="邮  箱" prop="cusEmail" >
                    <el-input v-model="customer.cusEmail" :disabled="true"/>
                </el-form-item>
                <el-form-item label="客户类型" prop="cusType" >
                    <el-input v-model="customer.cusType" :disabled="true"/>
                </el-form-item>
                <el-form-item label="积  分" prop="cusIntegral" >
                    <el-input v-model="customer.cusIntegral" :disabled="true"/>
                </el-form-item>
                <el-form-item label="注册时间" prop="cusTime" >
                    <el-input v-model="customer.cusTime" :disabled="true"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cus_account1=false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog :visible.sync="editDialogVisible" title="订单详细信息">
            <el-form :model="customer" :rules="rules" ref="customerForm" label-width="100px" style="width: 500px;"
                     size="small ">
                <el-form-item label="订单编号" prop="booOrderNum">
                    <el-input v-model="customer.booOrderNum" :disabled="true"/>
                </el-form-item>
                <el-form-item label="机票编号" prop="booNo">
                    <el-input v-model="customer.booNo" :disabled="true"/>
                </el-form-item>
                <el-form-item label="客户账号" prop="cusAccount">
                    <el-input v-model="customer.cusAccount" :disabled="true"/>
                </el-form-item>
                <el-form-item label="客户姓名" prop="cusName">
                    <el-input v-model="customer.cusName" :disabled="true"/>
                </el-form-item>
                <el-form-item label="身份证号" prop="cusId">
                    <el-input v-model="customer.cusId" :disabled="true"/>
                </el-form-item>

                <el-form-item label="电话号码" prop="cusTelNumber">
                    <el-input v-model="customer.cusTelNumber" :disabled="true"/>
                </el-form-item>

                <el-form-item label="预定时间" prop="boobTime">
                    <el-input v-model="customer.boobTime" :disabled="true"/>
                </el-form-item>
                <el-form-item label="预定状态" prop="bookFlag" >
                    <el-input v-model="customer.bookFlag" :disabled="true"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="editDialogVisible=false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-breadcrumb separator-class="el-icon-arrow-right"
                       style="background-color:white;padding: 8px;margin-bottom: 20px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>订票客户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="customerList" width="100%">
            <el-table-column label="客户账号" prop="cusAccount">

                <template slot-scope="scope">
                    <el-button type="text" @click="cus_account(scope.$index,scope.row)">{{scope.row.cusAccount}}</el-button>
                </template>

            </el-table-column>
            <el-table-column prop="cusName" label="姓名"></el-table-column>
            <el-table-column prop="cusId" label="身份证"></el-table-column>
            <el-table-column prop="cusType" label="客户类型"></el-table-column>
            <el-table-column prop="cusIntegral" label="积分"></el-table-column>
            <el-table-column label="查看订单">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editcustomer(scope.$index,scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="客户操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="deletecustomer(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin-top: 10px"
                background
                layout="prev, pager, next"
                :current-page.sync="pageInfo.pageNum"
                :page-count="pageInfo.pages"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="this.findList">
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "Customer",
        /*
        * created生命周期钩子函数,created在页面加载完毕后但是还没渲染的时候执行
        * */
        created() {
            this.findList();
        },
        methods: {

            /**
             * 获取表格内数据
             */

            findList() {
                axios.post("/customer/page", {
                    pageNum: this.pageInfo.pageNum,
                    pageSize: this.pageInfo.pageSize,
                    condition: {}
                }).then(resp => {
                    //date:{list:[],pageSize,pageNum,pages,total}
                    // console.log(resp.data);
                    this.pageInfo.pageSize = resp.data.pageSize;
                    this.pageInfo.pageNum = resp.data.pageNum;
                    this.pageInfo.total = resp.data.total;
                    this.pageInfo.pages = resp.data.pages;
                    //将数据赋值给customerList表格数据
                    this.customerList = resp.data.list;
                })
            },
            deletecustomer(index, row) {
                this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发生请求去删除对应的数据
                    axios.delete("/customer/delete/" + row.id).then(resp => {
                        if (resp.data === "success") {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                        //重新获取表格数据
                        this.findList();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            cus_account(index, row) {

                //弹出一个可以修改输入用户信息的表单窗口
                this.cus_account1 = true;
                  let clone = _.clone(row);
                this.customer = clone;
            },
            editcustomer(index, row) {
                //记录下原来的用户名

                //弹出一个可以修改输入用户信息的表单窗口
                this.editDialogVisible = true;
                //克隆row
                let clone = _.clone(row);
                this.customer = clone;

            },
        },
        data() {
            return {
                //pageInfo对象实际是从后台查询得到的，代表了分页必要的信息
                pageInfo: {
                    pageNum: 1, /*当前是那一页*/
                    pageSize: 5, /*每页展示多少条*/
                    pages: 10, /*总共有多少页*/
                    total: 100 /*总共有多少条数据*/
                },

                editDialogVisible: false,
                cus_account1:false,
                customer: {},
                btnSts: false,
                customerList: [],
                rules: {}

            }
        }
    }
</script>

<style scoped>

</style>